<template>
  <div id="toolInfoPage">
    <a-page-header title="工具详情" @back="goBack" />
    <a-card>
      <a-descriptions layout="horizontal" :column="2">
        <a-descriptions-item label="工具名称"
          >{{ data.name }}
        </a-descriptions-item>
        <a-descriptions-item label="描述"
          >{{ data.description }}
        </a-descriptions-item>
        <a-descriptions-item label="地址">{{ data.url }}</a-descriptions-item>
        <a-descriptions-item label="标签">
          <span>
            <a-tag
              v-for="tag in data.tags"
              :key="tag"
              :bordered="false"
              color="cyan"
            >
              {{ tag }}
            </a-tag>
          </span>
        </a-descriptions-item>
        <a-descriptions-item label="请求头"
          >{{ data.requestHeader }}
        </a-descriptions-item>
        <a-descriptions-item label="请求参数"
          >{{ data.requestParams }}
        </a-descriptions-item>
        <a-descriptions-item label="响应头"
          >{{ data.responseHeader }}
        </a-descriptions-item>
        <a-descriptions-item label="状态">
          <span>
            <a-tag :bordered="false" color="processing">
              {{ data.status === 0 ? "关闭" : "正常" }}
            </a-tag>
          </span></a-descriptions-item
        >
        <a-descriptions-item label="方法"
          >{{ data.method }}
        </a-descriptions-item>
        <a-descriptions-item label="创建人"
          >{{ data.user.userName }}
        </a-descriptions-item>
        <a-descriptions-item label="创建时间"
          >{{ formattedDate(data.createTime) }}
        </a-descriptions-item>
        <a-descriptions-item label="更新时间"
          >{{ formattedDate(data.updateTime) }}
        </a-descriptions-item>
      </a-descriptions>
    </a-card>
    <a-card>
      <a-form
        name="invoke"
        layout="vertical"
        autocomplete="off"
        @submit="onInvokeTool"
      >
        <a-form-item label="请求参数" name="userRequestParams">
          <a-textarea
            v-model:value="requestParams.userRequestParams"
            :rows="4"
          />
        </a-form-item>
        <a-form-item>
          <a-button type="primary" html-type="submit">调用</a-button>
        </a-form-item>
      </a-form>
    </a-card>
    <a-card>
      <a-descriptions title="调用结果" layout="horizontal" :column="1">
        <a-descriptions-item label="状态码"
          >{{ result.code }}
        </a-descriptions-item>
        <a-descriptions-item label="数据"
          >{{ result.data }}
        </a-descriptions-item>
        <a-descriptions-item label="消息"
          >{{ result.message }}
        </a-descriptions-item>
      </a-descriptions>
    </a-card>
  </div>
</template>

<script lang="ts" setup>
import { getToolVOById, invokeTool } from "@/api/tool";
import { useRoute } from "vue-router";
import { message } from "ant-design-vue";
import { onBeforeMount, ref } from "vue";
import { formattedDate } from "@/main";
import router from "@/router";

const route = useRoute();

const result = ref({
  code: "",
  data: {},
  message: "",
});

//定义数据
const data = ref({
  logo: "",
  name: "",
  description: "",
  url: "",
  tags: "",
  requestHeader: "",
  requestParams: "",
  responseHeader: "",
  status: "",
  method: "",
  user: {
    userName: "",
  },
  createTime: "",
  updateTime: "",
});

//生命周期
onBeforeMount(() => {
  //获取数据
  loadData();
});

const loadData = async () => {
  let param = String(route.params.id);
  if (!param) {
    message.error("参数错误");
    return;
  } else {
    getToolVOById(param)
      .then((res: any) => {
        if (res.code == 0) {
          data.value = res.data;
        }
      })
      .catch((err) => {
        message.error("系统错误，" + err.message);
      });
  }
};
// 构建的请求参数
const requestParams = {
  id: String(route.params.id),
  userRequestParams: "",
};

const onInvokeTool = () => {
  if (data.value.status == "0") {
    message.error("工具已关闭，无法调用");
    return;
  }
  invokeTool(requestParams)
    .then((res: any) => {
      if (res.code == 0) {
        message.success("调用成功");
        result.value = res;
      } else {
        message.error("调用失败，" + res.message);
      }
    })
    .catch((err) => {
      message.error("系统错误，" + err.message);
    });
};

//后退
const goBack = () => {
  router.back();
};
</script>

<style scoped></style>
